<template>
    <div class="main" ref="ref_main">
        <div v-if="isShow" style="box-shadow: 0 0 10px #00000026">
            <color-picker :pureColor="pureColor" :isWidget="isShow" :disableHistory="true" :standard-color="bColor"
                :pickerType="pickerType" format="hex" :zIndex="1" @pureColorChange="handle_pureColorChange" />
            <div style="text-align: right; padding: 0 16px 10px 16px; background-color: white">
                <el-button type="primary" @click="confirm">确定</el-button>
                <el-button @click="isShowColorPicker(false)">关闭</el-button>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const pureColor = ref('#71afe5');
const pickerType = ref('chrome');
const isShow = ref(false);
const bColor = [

    '#c21401',

    '#ff1e02',

    '#ffc12a',

    '#ffff3a',

    '#90cf5b',

    '#00af57',

    '#00afee',

    '#0071be',

    '#00215f',

    '#72349d',

]

const ref_main = ref('ref_main');

// 点击选择器外面会自动关闭选择器
const isFirstOpen = ref(false);
onMounted(() => {
    document.addEventListener('click', e => {
        if (!ref_main.value.contains(e.target) && !isFirstOpen.value) {
            isShow.value = false;
        }
        isFirstOpen.value = false;
    });
});

const props = defineProps({
    color: { type: String, default: '' },
    pickerType: { type: String, default: 'fk' }, //fk 、chrome
});
//  初始化颜色
pureColor.value = props.color;
pickerType.value = props.pickerType;

// 设置颜色选择器面板显隐
const isShowColorPicker = (data = false) => {
    isShow.value = data;
    isFirstOpen.value = true;
};
// 颜色变化事件
const handle_pureColorChange = e => {
    pureColor.value = e;
};

// 定义确定事件
const emit = defineEmits(['confirm']);
// 确定颜色
const confirm = () => {
    isShow.value = false;
    emit('confirm', pureColor.value);
};

// 暴露方法出去
defineExpose({
    isShowColorPicker,
    confirm,
});
</script>
<style lang="scss" scoped>
.main {
    :deep(.vc-colorpicker) {
        padding: 0;
        box-shadow: none;
        border-radius: 0;
    }

    :deep(.vc-color-wrap) {
        width: 0;
    }
}
</style>
